<template>
	<view>
		<view class="con">
			<view class="title">兑换数量</view>
			<view class="box">
				<view class="head">数量 <view class="unit">（Fmb）</view>
				</view>
				<view class="input">
					<input type="number" v-model="value" />
					<view class="rmb">={{ info.number }} RMB</view>
				</view>
				<view class="button" @click="sour_but">
					<image src="../static/exchange_tb1.png"></image>
					查询兑换人
				</view>
			</view>
			<view class="title" style="margin-top: 80rpx;">兑换人信息</view>
			<view class="box2">
				<image :src="getHead(info.icon)"></image>
				<view class="con1" v-if="show">
					<view class="item1">{{info.username}}</view>
					<view class="item2">{{info.user_tel}}</view>
				</view>
			</view>
			<view class="box3">*兑换成功60分钟内上传付款截图，否则将扣除信用积分</view>
			<view class="sub_button" @click="sub">确认兑换</view>
			<view class="tel"  v-if="false">
				<view class="title_item" style="margin-top: 70rpx;">
					<view class="up">
						<image src="../static/a12.png" class="img"></image>
						<view class="text" style="margin-right:0 ;">
							当前
						</view>
						<view class="text">
							奖励为{{already_get_number}}
						</view>
						<view class="text">
							，已累计消耗
						</view>
						<view class="number">
							{{use_number}}<text>Fmb</text>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="up">
						<view class="list">
							累计消耗数量
						</view>
						<view class="list">
							额外奖励
						</view>
					</view>
					<view class="down" :style="index+1==list.length?'border:0':''" :class="index%2==0?'d1':'d2'"
						v-for="(item,index) in list" :key="index">
						<view class="list l">
							{{item.begin +"-"+item.after}}
						</view>
						<view class="list">
							{{item.number}}
							<image class="icon" v-if="item.get_status!=0" @click="recieveReward(index)"
								:src="'../static/dui'+item.get_status+'.png'" mode=""></image>
						</view>
					</view>
				</view>
				<view class="box4">
					蜜贝兑换说明：<br>
					卖家上传的截图尤为重要，请校对好再上传。请确认截图是否 清晰，收款人及金额是否正确。切勿上传虚假截图。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				show: false,
				value: "",
				img_url: '../static/exchange_tb2.png',
				info: {
					top_uid: ""
				},
				list: [],
				discount: 0,
				discountArr: [],
				exchange_number: 0,
				extra_scale: 0,
				already_get_number: 0,
				use_number: 0,
			}
		},
		onLoad(option) {
			than = this;
			/* than.post("api/kmb/discount", null, function(data) {
				than.discount = data.discount;
				than.extra_scale = data.extra_scale
				if (data.discount == 100) {
					data.discount = data.discount / 10;
				}
				than.discountArr.push(parseInt((data.discount % 100) / 10))
				than.discountArr.push(parseInt(data.discount % 10))
				than.exchange_number = data.exchange_number;
				for (let i in data.list) {
					var d = data.list[i];

				
				}
				than.list = data.list;
			}) */
			than.post("api/Novice_reward/gradeReward", null, function(data) {
				than.list = data.list;
				than.already_get_number = data.already_get_number
				than.use_number = data.use_number
			})
		},
		methods: {
			recieveReward(index) {
				than.post("api/Novice_reward/recieveReward", {
					id: than.list[index].id
				}, function(data) {
					than.toast("兑换成功");
					than.list[index].get_status = 2
				})
			},
			sour_but() {
				if (than.value > 0) {
					than.post("api/kmb/recommender", {
						number: than.value
					}, function(data) {
						/* data.number = than.mul(than.value, than.div(data.extra_scale, 100)) */
						data.number = than.value;
						than.info = data;
						than.show = true
					})
				}

			},
			sub() {
				if (!than.info.top_uid) {
					than.toast("请获取兑换人")
					return false
				}
				than.post("api/kmb/addApplyLog", {
					number: than.value,
					top_uid: than.info.top_uid
				}, function(data) {
					than.toPage('/pages/htmlB/farm/list')
					/* 	than.toPage('/pages/htmlB/farm/v-index?type=1' + '&zhujian_id=' + data) */
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.content {
		border-radius: 20rpx;

		.up {
			height: 54rpx;
			background: #3476FE;
			display: flex;
			align-items: center;
			border-radius: 20rpx 20rpx 0px 0px;

			.img {
				width: 57rpx;
				height: 62rpx;
			}

			.list {
				width: 50%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				padding-left: 30rpx;
			}
		}

		.d1 {

			background: #FDEFE9;

			.list {
				color: #5C1506;
			}
		}

		.d2 {
			background: #FFFFFF;

			.list {
				color: #F46813;
			}
		}

		.down {
			display: flex;
			align-items: center;
			height: 66rpx;
			border-bottom: 2rpx solid #FBCDAB;

			.list {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				padding-left: 30rpx;

				.icon {
					margin-left: 48rpx;
					width: 39rpx;
					height: 39rpx;
				}
			}

			.l {
				border-right: 2rpx solid #FBCDAB;
			}
		}
	}

	.con {
		padding: 40rpx 36rpx 36rpx 36rpx;

		.tel {
			background: linear-gradient(0deg, #FAFBFF, #EEF7FE);
			padding: 0 42rpx;
			border-radius: 10rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}

		.title_item {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;

			.up {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 120rpx;

				.img {
					width: 57rpx;
					height: 62rpx;
				}

				.text {
					font-size: 28rpx;
					color: #061C5C;
					margin-right: 10rpx;
				}

				.view {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 60rpx;
					font-family: Myriad Pro;
					font-weight: bold;
					color: #F66337;
				}

				.number {
					font-size: 36rpx;
					font-family: DIN Medium;
					font-weight: 400;
					color: #F66337;

					text {
						font-size: 26rpx;
					}
				}
			}
		}

		.box {
			height: 210rpx;
			padding: 23rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.head {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 15rpx;
				display: flex;
				align-items: center;

				.unit {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.input {
				display: flex;
				align-items: center;
				padding: 8rpx 0rpx;

				input {
					font-size: 60rpx;
					font-weight: bold;
					width: 80%;
					height: 80rpx;
					font-family: myFirstFont;
				}

				.rmb {
					margin-left: auto;
					font-size: 24rpx;
					font-weight: bold;
					color: #F46813;
					padding: 20rpx 0rpx;
				}
			}



			.button {
				display: flex;
				align-items: center;
				width: 245rpx;
				height: 74rpx;
				background: #3476FE;
				box-shadow: 0px 3rpx 16rpx 4rpx rgba(148, 146, 146, 0.12);
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
			}
		}

		.box2 {
			padding: 37rpx 24rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			image {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.con1 {
				flex: 1;

				.item1 {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.item2 {
					font-size: 40rpx;
					font-weight: bold;
					color: #F46813;
					font-style: italic;
					font-family: myFirstFont;
					margin-top: 10rpx;
				}
			}
		}

		.box3 {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			padding: 40rpx 0rpx;
		}

		.sub_button {
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			line-height: 74rpx;
			box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(170, 170, 170, 0.16);
			border-radius: 20rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
		}

		.box4 {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;
			margin-top: 60rpx;
		}
	}
</style>
